<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:javascript="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>产品-产品详情</title>
    <link href="css/base.css" rel="stylesheet" type="text/css"/>
    <link href="css/css.css" rel="stylesheet" type="text/css"/>
    <link href="css/style1.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery.simpleGal.js"></script>
    <script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>
    <!--自定义工具-->
    <script type="text/javascript" src="js/HttpUtil.js"></script>
    <!--参数校验工具-->
    <script src="validation-1.19.2/jquery.validate.min.js"></script>
    <!--本地化文件-->
    <script src="validation-1.19.2/localization/messages_zh.min.js"></script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        img {
            max-width: none;
        }

        .tb-pic a {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .tb-pic a img {
            vertical-align: middle;
        }

        .tb-pic a {
            *display: block;
            *font-family: Arial;
            *line-height: 1;
        }

        .tb-thumb {
            margin: 10px 0 0;
            overflow: hidden;
        }

        .tb-thumb li {
            float: left;
            width: 86px;
            height: 86px;
            overflow: hidden;
            border: 1px solid #cdcdcd;
            margin-right: 5px;
        }

        .tb-thumb li:hover, .tb-thumb .tb-selected {
            width: 84px;
            height: 84px;
            border: 2px solid black;
        }

        .tb-s310, .tb-s310 a {
            height: 365px;
            width: 365px;
        }

        .tb-s310, .tb-s310 img {
            max-height: 365px;
            max-width: 365px;
        }

        .tb-booth {
            border: 1px solid #CDCDCD;
            position: relative;
            z-index: 1;
        }

        div.zoomDiv {
            z-index: 999;
            position: absolute;
            top: 0px;
            left: 0px;
            background: #ffffff;
            border: 1px solid #ccc;
            display: none;
            overflow: hidden;
        }

        div.zoomMask {
            position: absolute;
            background: url("images/mask.png") repeat;
            cursor: move;
            z-index: 1;
        }

        /*弹出隐藏层*/
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 1200px;
            background-color: black;
            z-index: 9999;
            -moz-opacity: 0.4;
            opacity: 0.40;
            filter: alpha(opacity=40);
        }

        .white_content {
            display: none;
            position: absolute;
            top: 20%;
            left: 40%;
            width: 400px;
            height: 175px;
            border: none;
            background-color: white;
            z-index: 100200;
            overflow: auto;
        }

        .white_content_small {
            display: none;
            position: absolute;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

        .dialogbox {
            padding: 20px;
            line-height: 40px;
        }

        .addbtn {
            width: 22px;
            height: 22px;
            background: url(images/close2.png) no-repeat;
            margin-right: 5px;
            margin-top: 3px;
            border: none;
            float: right;
        }
    </style>
    <script type="text/javascript">

        //获取地址栏中的商品id
        var goodsIdFormURL = getUrlParam("goodsId");
        console.log("goodsIdFormURL=======" + goodsIdFormURL);

        //弹出隐藏层
        function ShowDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'block';
            document.getElementById(bg_div).style.display = 'block';
            var bgdiv = document.getElementById(bg_div);
            bgdiv.style.width = document.body.scrollWidth;
            $("#" + bg_div).height($(document).height());
        };

        //关闭弹出层
        function CloseDiv(show_div, bg_div) {
            document.getElementById(show_div).style.display = 'none';
            document.getElementById(bg_div).style.display = 'none';
        };

    </script>
</head>

<body>

<!--头部导航-->
<div class="nofix_head">
    <div class="top wrapper">
        <div class="float-lt margin-b10">
            <ul>
                <li><a href="login.html" target="_blank" class=" colororange">请登录</a></li>
                <li><a href="register.html" target="_blank">注册会员</a></li>
            </ul>
        </div>
        <div class="float-rt">
            <ul>
                <li><a href="index.html" target="_blank">首页</a></li>
                <li><a href="user_center.html">用户中心</a></li>
                <li><a id="linkOrder" href="message_center.html">消息中心</a></li>
                <li><a href="goodsList.html">商品分类</a></li>
                <li><a href="Cart.html">我的购物车</a></li>
            </ul>
        </div>
    </div>
</div>
<!--头部导航END-->

<!--头部快捷栏-->
<div class="clear wrapper header">
    <div class="logo float-lt" style="margin-right:130px;"><img src="images/logo.png" width="193" height="97"/></div>
    <div class="search float-lt">
        <div class="search_list">
            <ul>
                <li class="current"><a href="#">产品</a></li>
                <li><a href="#">信息</a></li>
            </ul>
        </div>
        <div class="clear search_cur">
            <ul>
                <li>
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                </li>
            </ul>
            <ul>
                <li class="search_btn"><a href="#">搜索</a></li>
            </ul>
        </div>
    </div>
</div>
<!--头部快捷栏END-->

<div class="clear">&nbsp;</div>

<!--网站头部-->
<div id="">
    <div class="sup-wid">
        <div><img src="images/TB27.jpg" width="100%"/></div>
        <div class="supplie-top">
            <div class="clear">
                <table width="100%" border="0" cellpadding="0" cellspacing="0" class="nav">
                    <tr>
                        <td align="center"><a href="index.html">首页</a></td>
                        <td align="center"><a href="#">全部产品</a></td>
                        <td align="center"><a href="#">企业介绍</a></td>
                        <td align="center"><a href="#">最新产品</a></td>
                        <td align="center"><a href="#">热销产品</a></td>
                        <td align="center"><a href="#">促销产品</a></td>
                    </tr>
                </table>
            </div>
            <div class=" clear bread"><a href="#">首页</a> <span class="pipe">&gt;</span> <a href="#">某供应商</a> <span
                    class="pipe">&gt;</span> <a href="#">某产品</a></div>
        </div>


        <div class="pro_detail" id="goods_details_vue">
            <div class="pro_detail_img float-lt">
                <div class="gallery">
                    <div class="tb-booth tb-pic tb-s310"><img :src="goodsInfo.goodImg"
                                                              alt="展品细节展示放大镜特效"
                                                              :rel="goodsInfo.goodImg"
                                                              class="jqzoom"/></a></div>
                    <ul class="tb-thumb" id="thumblist">
                        <li class="tb-selected">
                            <div class="tb-pic tb-s40"><a href="#"><img :src="goodsInfo.goodImg"
                                                                        :mid="goodsInfo.goodImg"
                                                                        :big="goodsInfo.goodImg"></a></div>
                        </li>
                        <li>
                            <div class="tb-pic tb-s40"><a href="#"><img :src="goodsInfo.goodImg"
                                                                        :mid="goodsInfo.goodImg"
                                                                        :big="goodsInfo.goodImg"></a></div>
                        </li>
                        <li>
                            <div class="tb-pic tb-s40"><a href="#"><img :src="goodsInfo.goodImg"
                                                                        :mid="goodsInfo.goodImg"
                                                                        :big="goodsInfo.goodImg"></a></div>
                        </li>
                        <li style="margin-right:0px;">
                            <div class="tb-pic tb-s40"><a href="#"><img :src="goodsInfo.goodImg"
                                                                        :mid="goodsInfo.goodImg"
                                                                        :big="goodsInfo.goodImg"></a></div>
                        </li>
                    </ul>
                </div>
                <script type="text/javascript">
                    $(function () {
                        $("#h1").toggle(function () {
                            $("#h1").css("background-image", "url('images/iconfont-xingxingman_add.png')");
                        }, function () {
                            $("#h1").css("background-image", "url('images/iconfont-xingxingman_add.png') ");
                        })
                    })
                </script>
                <input type="button" value="加入收藏" id="h1" class="addcart" onclick="ShowDiv('MyDiv2','fade2')"/>
            </div>

            <div class="float-lt pro_detail_con">
                <div class="pro_detail_tit">{{goodsInfo.goodShop}}</div>
                <div class="pro_detail_ad">
                    {{goodsInfo.goodName}}
                </div>
                <div class="pro_detail_score margin-t20">
                    <ul>
                        <li class="margin-r20">评分</li>
                    </ul>
                    <ul v-for="(s,index) in goodsStar">
                        <li style="width:16px; height:16px;"><img src="images/iconfont-xingxingman.png" width="16"
                                                                  height="16"/></li>
                    </ul>
                </div>
                <div class="clear"></div>
                <div class="pro_detail_act margin-t20 fl"><span class="margin-r20">售价</span><span
                        style="font-size:26px; font-weight:bold; color:#dd514c;">￥{{goodsInfo.goodPrice}}</span></div>
                <div class="clear"></div>
                <div class="act_block margin-t5"><span>本商品可使用9999积分抵用￥9.99元</span></div>
                <div class="pro_detail_number margin-t30">
                    <div class="margin-r20 float-lt">数量</div>
                    <div class=""><i class="jian"></i>
                        <input type="text" value="1" class="float-lt choose_input" v-model="goodsCount"/>
                        <i class="jia"></i>
                        <span>&nbsp;盒</span>
                        （库存<span>{{goodsInfo.goodCount}}</span>盒）
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="guige">
                    <div class="margin-r20 float-lt" style="line-height:25px;">规格</div>
                    <ul>
                        <li class="guige-cur">规格一</li>
                        <li>规格二</li>
                        <li>规格三</li>
                    </ul>
                    <div class="clear"></div>
                </div>
                <div class="pro_detail_number margin-t20" id="deal_vue">
                    <div class="margin-r20 float-lt">日成交量：<span class="colorred"><strong>{{goodDeal}}件</strong></span></div>
                    <div class="clear"></div>
                </div>
                <div class="clear"></div>
                <div class="pro_detail_btn margin-t30">
                    <ul>
                        <li class="pro_detail_shop"><a href="#">立即购买</a></li>
                        <!--onclick="ShowDiv('MyDiv','fade')"-->
                        <li class="pro_detail_add"><a href="javascript:void(0);" onclick="checkSometing()">加入购物车</a>
                        </li>
                    </ul>
                </div>
            </div>

        </div>
        <div class="clear"></div>
        <script>
            $(function () {
                $(".pro_tab li").each(function (i) {
                    $(this).click(function () {
                        $(this).addClass("cur").siblings().removeClass("cur");
                        $(".conlist .conbox").eq(i).show().siblings().hide();
                    })
                })
            })
        </script>

        <div class="pro_con margin-t55" style="overflow:hidden;" id="goods_infoExpand_vue">
            <div class="pro_tab">
                <ul>
                    <li class="cur">产品介绍</li>
                    <li>规格及包装</li>
                    <li>评价</a></li>
                </ul>
            </div>

            <div class="conlist" v-for="(goodsInfoExpand,index) in goodsInfoExpandList">
                <div class="conbox" style="display:block;" v-if="index==0">{{goodsInfoExpand.goodPresentation}}</div>
                <div class="conbox" v-if="index==0">2</div>
                <div class="conbox" v-if="index==0">
                    <div class="pro_judge">
                        <ul>
                            <li class="cur">
                                <input name="RadioGroup1" type="radio" value="" checked="checked" id="RadioGroup1_0"/>
                                全部（100）
                            </li>
                            <li>
                                <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_1"/>
                                好评（80）
                            </li>
                            <li>
                                <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_2"/>
                                中评（10）
                            </li>
                            <li>
                                <input name="RadioGroup1" type="radio" value="" id="RadioGroup1_3"/>
                                差评（10）
                            </li>
                        </ul>

                        <table width="100%" border="0">
                            <tr v-for="goodsInfoExpand in goodsInfoExpandList">
                                <td width="80" align="left"><a href="" rel="images/01_mid.png" class="preview"><img
                                        src="images/01_mid.jpg" width="60" height="60" class="border_gry"/></a></td>
                                <td>{{goodsInfoExpand.userContent}}<br/>
                                    <br/>
                                    <span class="pro_judge_time">{{goodsInfoExpand.createTime}}</span></td>
                                <td>{{goodsInfoExpand.userName}}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <div class="helper">
            <div class="mod">
                <div class="mod-wrap">
                    <h4><img src="images/h1.png" width="60" height="60"/><span>新手上路</span></h4>
                </div>
            </div>
            <div class="mod">
                <div class="mod-wrap">
                    <h4><img src="images/h2.png" width="60" height="60"/><span>如何支付</span></h4>
                </div>
            </div>
            <div class="mod">
                <div class="mod-wrap">
                    <h4><img src="images/h3.png" width="60" height="60"/><span>配送运输</span></h4>
                </div>
            </div>
            <div class="mod mod-last">
                <div class="mod-wrap">
                    <h4><img src="images/h4.png" width="60" height="60"/><span>售后服务</span></h4>
                </div>
            </div>
            <div class="mod mod-last">
                <div class="mod-wrap">
                    <h4><img src="images/h5.png" width="60" height="60"/><span>联系我们</span></h4>
                </div>
            </div>
        </div>

    </div>
</div>
<div class="clear">&nbsp;</div>


<!--网站地图-->
<div class="fri-link-bg">
    <div class="fri-link">
        <div class="logo float-lt margin-r20"><img src="images/fo-logo.jpg" width="152" height="81"/></div>
        <div class="float-lt"><img src="images/qd.jpg" width="90" height="90"/>
            <p>扫描下载APP</p>
        </div>
        <ul class="link-add float-lt ma">
            <li><a href="#" class="font14">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
        <ul class="link-add float-lt">
            <li><a href="#" class="font14">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
        <ul class="link-add float-lt">
            <li><a href="#" class="font14">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
        <ul class="link-add float-lt">
            <li><a href="#" class="font14">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
        <ul class="link-add float-lt">
            <li><a href="#" class="font14">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
        <ul class="link-add float-lt">
            <li><a href="#" class="font14">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
        <ul class="link-add float-lt">
            <li><a href="#" class="font14">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
            <li><a href="#">网站栏目</a></li>
        </ul>
    </div>
</div>
<!--网站地图END-->


<!--网站页脚-->
<div class="copyright">
    <div class="copyright-bg">
        <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
        <div class="hotline co-ph">
            <p>版权所有Copyright ©***************</p>
            <p>*ICP备***************号 不良信息举报</p>
            <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********

                <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
        </div>
    </div>
</div>
<!--网站页脚END-->


<!--弹出层时背景层DIV-->

<!--商品添加成功DIV-->
<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content">
    <div style="width:385px; height:30px; background:#1ba67f; padding-left:15px; color:#fff; line-height:30px; font-size:14px;">
        <span onclick="CloseDiv('MyDiv','fade')">
            <input type="button" class="addbtn">
        </span>商品加入购物车
    </div>
    <div class="dialogbox" id="insert_goods_to_car_vue">
        <p>{{promptInfo}}</p> <!--商品添加成功！-->
    </div>
</div>
</div>

<!--商品收藏成功DIV-->
<div id="fade2" class="black_overlay"></div>
<div id="MyDiv2" class="white_content">
    <div style="width:385px; height:30px; background:#1ba67f; padding-left:15px; color:#fff; line-height:30px; font-size:14px;"> <span
            onclick="CloseDiv('MyDiv2','fade2')">
        <input type="button" class="addbtn">
        </span>商品收藏
    </div>
    <div class="dialogbox">
        <p>商品收藏成功！</p>
    </div>
</div>
</div>


<script type="text/javascript">

    $(document).ready(function () {

        $(".jqzoom").imagezoom();

        $("#thumblist li a").mousemove(function () {
            $(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
            $(".jqzoom").attr('src', $(this).find("img").attr("mid"));
            $(".jqzoom").attr('rel', $(this).find("img").attr("big"));
        });

    });

    //vue填充数据
    // 获取商品详情信息
    var goods_details_vm = new Vue({
        el: '#goods_details_vue',
        data: {
            goodsInfo: {},
            goodsStar: 1,
            goodsCount: 1,
            goodDeal: 0,
        },

        methods: {
            //ajax方式获取商品信息
            getGoodsInfo: function () {
                let vue_quote = this;
                //获取后台数据
                let url = "/good/findGoodInfoById.do";
                let params = {goodId: goodsIdFormURL};
                /**
                 * 发起POST方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                getWithParams(url, params, function (data) {
                    /*
                    回调函数中的this不是指向Vue对象，回调函数中的this指向的是Window对象,
                    原因: 发起异步的http请求，实际上是通过JS的原生对象[Window]发起的，
                    回调函数是Window对象调用的，所以回调函数中的this指向的是Window对象，
                    而不是指向Vue对象。
                    */
                    vue_quote.goodsInfo = data;
                    console.log(vue_quote.goodsInfo);
                });
            },

            //通过商品id，查询商品评分
            getGoodsStarScore: function () {
                let vue_quote = this;
                //获取后台数据
                let url = "/good/findGoodStarScore.do";
                let params = {goodId: goodsIdFormURL};
                /**
                 * 发起GET方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                getWithParams(url, params, function (data) {
                    /*
                    回调函数中的this不是指向Vue对象，回调函数中的this指向的是Window对象,
                    原因: 发起异步的http请求，实际上是通过JS的原生对象[Window]发起的，
                    回调函数是Window对象调用的，所以回调函数中的this指向的是Window对象，
                    而不是指向Vue对象。
                    */
                    vue_quote.goodsStar = data;
                });
            },

            getGoodDeal: function () {
                let vue_quote = this;
                //获取后台数据
                let url = "/good/findGoodDeal.do";
                let params = {goodId: goodsIdFormURL};
                /**
                 * 发起GET方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                getWithParams(url, params, function (data) {
                    /*
                    回调函数中的this不是指向Vue对象，回调函数中的this指向的是Window对象,
                    原因: 发起异步的http请求，实际上是通过JS的原生对象[Window]发起的，
                    回调函数是Window对象调用的，所以回调函数中的this指向的是Window对象，
                    而不是指向Vue对象。
                    */
                    vue_quote.goodDeal = data;
                });
            }
        },

        /**
         * 页面加载完成，并且Vue对象加载完成之后回调该函数：mounted
         */
        mounted: function () {
            this.getGoodsInfo();
            this.getGoodsStarScore();
            this.getGoodDeal();
        }
    });


    let goods_infoExpand_vm = new Vue({
        el: "#goods_infoExpand_vue",
        data: {
            goodsInfoExpandList: []
        },
        methods: {
            //ajax方式获取商品评论信息
            getGoodsInfoExpandList: function () {
                let vue_quote = this;
                //获取后台数据
                let url = "/good/findGoodInfoExpand.do";
                let params = {goodId: goodsIdFormURL};
                /**
                 * 发起GET方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                getWithParams(url, params, function (data) {
                    vue_quote.goodsInfoExpandList = data;
                });
            }
        },

        /**
         * 页面加载完成，并且Vue对象加载完成之后回调该函数：mounted
         */
        mounted: function () {
            this.getGoodsInfoExpandList();
        }
    });

    //添加商品到购物车
    let insertGoodsToCar_vm = new Vue({
        el: "#insert_goods_to_car_vue",
        data: {
            respMessage: 1,
            promptInfo: '加入购物车成功！'
        },
        methods: {
            //添加购物车
            insertGoodsToCar: function (count, userCookie) {
                let vue_quote = this;
                //获取后台数据
                let url = "cart/addCart.do";
                let params = {
                    goodId: goodsIdFormURL,
                    num: count,
                    userID: userCookie.userID
                };
                /**
                 * 发起POST方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                postWithJson(url, params, function (data) {
                    console.log("添加购物车响应数据：");
                    console.log(data);
                    vue_quote.respMessage = data;
                    if (data == 1) {
                        vue_quote.promptInfo = '添加购物车成功！'
                    } else {
                        vue_quote.promptInfo = '添加购物车失败！'
                    }
                });
            }
        }
    });

    //校验用户是否登录，购买数量是否超过库存
    function checkSometing() {
        let userMsg = checkUserLogin();
        if (userMsg == null) {
            return;
        }
        let reserve = goods_details_vm.goodsInfo.goodCount; //从goods_details_vm获取商品库存
        let goodsCount = goods_details_vm.goodsCount; //从goods_details_vm中获取用户输入的商品数量

        if (goodsCount > reserve) {
            insertGoodsToCar_vm.promptInfo = '购买数量过多！';
            ShowDiv('MyDiv', 'fade');
            return;
        } else {
            //发起异步请求，添加购物车
            insertGoodsToCar_vm.insertGoodsToCar(goodsCount, userMsg);
            ShowDiv('MyDiv', 'fade');
            return;
        }
    }

</script>
</body>
</html>
